<template>
  <div class="add-container">
    <div class="add-top">
      <el-page-header @back="goBack" :content="gobacktitle"></el-page-header>
    </div>
    <div class="add-main">

      <div class="add-main-top">

        <el-descriptions title="入库单" direction="vertical" :column="7" border id="descriptions">
          <el-descriptions-item label="入库单号">
            {{ ruleForm.rukudh }}
          </el-descriptions-item>
          <el-descriptions-item label="物资名称">
            {{ ruleForm.wzmc }}
          </el-descriptions-item>
          <el-descriptions-item label="库房名称">
            {{ ruleForm.kufangmc }}
          </el-descriptions-item>

          <el-descriptions-item label="物资区分">
            {{ ruleForm.wuziqfmc }}
          </el-descriptions-item>
          <el-descriptions-item label="入库状态">
            {{ ruleForm.zhuangtaimc }}
          </el-descriptions-item>
          <el-descriptions-item label="入库类型">
            {{ ruleForm.rukulxmc }}
          </el-descriptions-item>
          <el-descriptions-item label="主管单位">
            {{ ruleForm.zhuguandwmc }}
          </el-descriptions-item>



        </el-descriptions>
      </div>

      <div class="add-main-list2">
        <div class="add-main-tital">
          <p>入库单明细</p>
        </div>
        <div class="table-list">
          <ux-grid border show-overflow ref="plxTable" keep-source height="tabheight" :highlightCurrentRow="false"
            widthResize>
            <ux-table-column type="index" title="序号" width="50"></ux-table-column>
            <!-- <ux-table-column field="wuzibm" title="物资代码"></ux-table-column> -->
            <ux-table-column field="zhengshibmm" title="编目码"></ux-table-column>
            <ux-table-column field="wuzimc" title="物资名称"></ux-table-column>
            <ux-table-column field="guigexh" title="规格型号"></ux-table-column>
            <ux-table-column field="picih" title="批次号"></ux-table-column>
            <ux-table-column field="jihuarksl" title="计划入库数量"></ux-table-column>
            <!-- <ux-table-column field="sl" title="数量"></ux-table-column> -->
            <ux-table-column show-overflow-tooltip field="shengchancj" title="生产厂家"></ux-table-column>
            <ux-table-column show-overflow-tooltip field="shengchanrq" title="生产日期"></ux-table-column>
            <ux-table-column show-overflow-tooltip field="bzq" title="保质期(月)"></ux-table-column>
            <ux-table-column show-overflow-tooltip field="danjia" title="单价(元)"></ux-table-column>
            <ux-table-column show-overflow-tooltip field="jiliangdw" title="计量单位"></ux-table-column>
            <ux-table-column show-overflow-tooltip field="je" title="金额(元)">
              <template v-slot="scope">
                <span>
                  {{ scope.row.je }}
                </span>
              </template>
            </ux-table-column>
          </ux-grid>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Page1Deatail',
  props: {
    gobacktitle: {
      type: String,
      default: '新增',
      required: true,
    },
    datarow: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      show: true,
      ruleForm: {
        rkdh: '',
        wzmc: '',
        wzqf: '',
        rkzt: '',
        rklx: '',
        rukudmx: [],
      },
      rules: {
        rkdh: [{ required: true, message: '请输入入库单号', trigger: 'blur' }],
      },
      tabheight: 500,
      centerDialogVisible: false,
    }
  },
  created() { },
  mounted() {
    this.ruleForm = Object.assign({}, this.datarow)
    this.$nextTick(() => {
      this.$refs.plxTable.reloadData(this.ruleForm.rukudmx)
    })
  },
  methods: {
    goBack() {
      this.$parent.detailshow = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    selectChange(e) { },
    uploadSuccess() {
      this.importShow = false
    },
  },
}
</script>
<style lang="scss" scoped>
.add-container {
  position: fixed;
  left: 0;
  top: .75rem;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #f6f8f9;
  padding: 0 .2rem 1rem .2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .add-top {
    padding: .10rem 0;

    ::v-deep .el-page-header__title {
      font-size: .16rem !important;
    }
  }

  .add-main-tital {
    font-size: 18px;
    border-left: 10px solid rgb(121, 189, 255);
    padding-left: 10px;
    margin: 20px 0 20px;

    p {
      margin: 0;
    }
  }

  .add-main {
    flex: 1;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .add-main-top {
      padding: 0 20px;
      background: #fff;

      ::v-deep {
        .el-descriptions__header {
          border-left: 10px solid #79bdff;
          margin: 20px 0;
        }

        .el-descriptions__title {
          padding-left: 10px;
          font-size: 18px;
        }

        .el-descriptions-item__label {
          font-weight: bold;
          color: #333;
        }
      }
    }

    .add-main-list2 {
      flex: 1;
      background: #fff;
      padding: 0 20px;
      box-sizing: border-box;

      .list-button-group {
        display: flex;
        flex-direction: row;
        padding-bottom: 20px;

        .button-item {
          padding: 0px 10px;
        }

        .button-item:first-child,
        &:last-child {
          padding: 0px 10px 0 0;
        }
      }
    }

    .el-button {
      font-size: .14rem !important;
    }

    ::v-deep {
      .elx-table--header-wrapper {
        background-color: rgb(233, 243, 255);
      }

      .elx-table {
        font-size: 0.14rem !important;
      }

      .elx-body--column {
        height: .48rem !important;
        line-height: .24rem;
      }

      .elx-header--column {
        background-image: none !important;
        height: .48rem !important;
      }
    }

    .submit-button {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>